<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>喵眼电影</title>
		<link rel="icon" href="../static/img/01.png" type="image/x-icon" />
		<link rel="stylesheet" href="../static/css/bootstrap.min.css" type="text/css" />
		<style>
			@media (min-width: 992px) {
				.card-img-top{
					width: 100%;
					height: 280px;
				}
			}
			.text_red{
				color: red;
			}
			.card-img-overlay{
				color: white;
				top: auto;
			}
			.list:hover{
				transition:all 0.3s ease-out;
				width: 104%;
				font-size: 130%;
				background-color: #f3f3f3;
			}
			#headerimg{
				height: 600px;
			}
		</style>
		
	</head>
	
	<body>
		<!-- 导航栏 -->
		<div id="header"></div> 
		
		<!-- 巨幕 -->
		<div class="jumbotron bg-light m-3 p-5 shadow">
			<!-- 轮播器 -->
			<div id="wrapper" class="carousel slide" data-ride="carousel" data-interval="2000">
			  <ol class="carousel-indicators">
			    <li data-target="#wrapper" data-slide-to="0" class="active"></li>
			    <li data-target="#wrapper" data-slide-to="1"></li>
			    <li data-target="#wrapper" data-slide-to="2"></li>
				<li data-target="#wrapper" data-slide-to="3"></li>
			  </ol>
			  <div class="carousel-inner carousel-fade">
				<div id="headimgs"></div>
			  </div>
			  <a class="carousel-control-prev" href="#wrapper" role="button" data-slide="prev">
			    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
			    <span class="sr-only">Previous</span>
			  </a>
			  <a class="carousel-control-next" href="#wrapper" role="button" data-slide="next">
			    <span class="carousel-control-next-icon" aria-hidden="true"></span>
			    <span class="sr-only">Next</span>
			  </a>
			</div>
		</div>
		
		<!-- 内容板块 -->
		<div class="container-fluid">
			<div class="row">
				<!-- 左侧 -->
				<!-- 选项卡 -->
				<div class="col-lg-9 d-md-flex">
					<div class="nav d-md-block d-none" style="min-width: 8rem;">
						<a href="#reying" class="nav-link active nav-tabs" data-toggle="tab">正在热映</a>
						<a href="#shangying" class="nav-link nav-tabs" data-toggle="tab">即将上映</a>
					</div>
					<div class="nav nav-pills d-md-none" style="min-width: 8rem;">
						<a href="#reying" class="nav-link active nav-tabs" data-toggle="tab">正在热映</a>
						<a href="#shangying" class="nav-link nav-tabs" data-toggle="tab">即将上映</a>
					</div>
					
					<!-- 电影板块 -->
					<!-- 卡片 -->
					<div class="tab-content">
						<div class="tab-pane fade show active" id="reying">
							<div class="mb-3 border-bottom border-info text-danger ">
								<span class="m-3" style="font-size: 1.75rem!important;">正在热映</span><a href="movie"><span class="text-danger float-right mt-3">全部<b>></b></span></a>
							</div>
							<div class="row mt-2 m-0">
								<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 m-auto" data-role="listview" id="rys"></div>
							</div>
						</div>
						<div class="tab-pane fade" id="shangying">
							<div class="text-danger mb-3 border-bottom border-info">
								<span class="m-3" style="font-size: 1.75rem!important;">即将上映</span><a href="movie"><span class="text-danger float-right mt-3">全部<b>></b></span></a>
							</div>
							<div class="row mt-2 m-0">
								<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 m-auto" data-role="listview" id="sys"></div>
							</div>
						</div>
					</div>
				</div>
				<!-- 右侧 -->
				<div class="col-lg-3">
					<div class="text">
						<span class="text-danger font-weight-bold"><h2>今日票房</h2></span><br>
						<div class="position-static border-bottom border-top" id="img"></div>
						<div class="font-weight-bold" id="lists"></div>
					</div>
				</div>
			</div>
		</div>
		<!-- 页脚 -->
		<div class="mt-5" id="footer"></div>
	</body>
	<!-- js -->
	<script src="../static/js/jquery-3.2.1.min.js"></script>
	<script src="../static/js/jquery.mobile-1.4.5.js?ver=1.4.5"></script>
	<script src="../static/js/jquery.tmpl.js"></script>
	<script src="../static/js/bootstrap.bundle.min.js"></script>
	<script src="../static/js/TSMSys.hotelsAjax.js"></script>
	<script>
		$(function(){
			$('#header').load('header');
			$('#footer').load('footer');
		})
	</script>
	<!-- 轮播器模板 -->
	<script data-role="listview" id="myHeader" type="text/x-jquery-tmpl">
		<div class="carousel-item">
		  <a href="details?office=${url}?id=${ids}"><img src="${img}" class="d-block w-100 img-fluid" id='headerimg' alt="${name}"></a>
		</div>
	</script>
	<!-- 电影板块模板 -->
	<!-- 卡片 -->
	<script data-role="listview" id="myTemplate" type="text/x-jquery-tmpl">
		<div class="col-lg-3 col-md-6 col-sm-12">
		<a href="details?office=${m_link}?id=${m_id}" class="stretched-link text-decoration-none">
			<div class="card p-1 mb-3 text-decoration-none text-dark">
				<img class="card-img-top img-fluid" src="${m_src}" alt="${m_name}">
				<div class="card-img-overlay">
					<h5 class="card-title text-center mb-4">${m_name}</h5>
				</div>
				<div class="text-center text-danger font-weight-bold border">购票</div>
			</div>
		</a>
		</div>
	</script>
	
	<script>
		$.ajax({
			type: 'get',
			url: "http://localhost:8080/maoyan/moviesimgs",
			dataType: "json",
			data: {},
			success: function(data) {
				console.log(data);
				// 将json对象载入模板,并插入到#lists末尾中去
				$('#myHeader').tmpl(data).appendTo('#headimgs');
				$('.carousel-item')[0].setAttribute('class','carousel-item active');
			},
			error: function() {
				alert('连接超时！');
			},
		});
		$.ajax({
			type: 'get',
			url: "http://localhost:8080/maoyan/moviesry",
			dataType: "json",
			data: {},
			success: function(data) {
				console.log(data);
				data = [data[0],data[1],data[2],data[3],data[4],data[5],data[6],data[7]]
				// 将json对象载入模板,并插入到#lists末尾中去
				$('#myTemplate').tmpl(data).appendTo('#rys');
			},
			error: function() {
				alert('连接超时！');
			},
		});
		$.ajax({
			type: 'get',
			url: "http://localhost:8080/maoyan/moviessy",
			dataType: "json",
			data: {},
			success: function(data) {
				console.log(data);
				data = [data[0],data[1],data[2],data[3],data[4],data[5],data[6],data[7]]
				// 将json对象载入模板,并插入到#lists末尾中去
				$('#myTemplate').tmpl(data).appendTo('#sys');
			},
			error: function() {
				alert('连接超时！');
			},
		});
		$.ajax({
			type: 'get',
			url: "http://localhost:8080/maoyan/movieslists",
			dataType: "json",
			data: {},
			success: function(data) {
				console.log(data);
				ids = data[0]['ids']
				img = data[0]['img'];
				name = data[0]['name']
				score = data[0]['score']
				urls = data[0]['urls']
				imgs = "<a href='details?office="+urls+"?id="+ids+"' class='text-decoration-none'><img src='"+img+"'style='width:90px;' class='mr-4'></img><strong class='font-weight-bold text-dark'>"+name+"<i class='text-warning float-right mt-xl-5'>"+score+"分"+"</i></strong></a>";
				$("#img").append(imgs);
				for(i=1;i<10;i++){
					html = "<a href='details?office="+data[i]['urls']+"?id="+data[i]['ids']+"' class='text-decoration-none'><div class='list mt-4 border-bottom text-dark'><i class='text_red' style='font-size:130%;'>"+data[i]['id']+"</i>"+"\t\t"+data[i]['name']+"<i class='float-right text-warning'>"+data[i]['score']+"分"+"</i></div></a>";
					$("#lists").append(html);
				}
			},
			error: function() {
				alert('连接超时！');
			},
		});
	</script>
</html>
